<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            background-color: #EDEDED;
        }

        section {
            width: 100%;
            height: 73rem;
        }

        .travel {
            width: 100%;
            height: 38rem;
            margin-bottom: 3.125rem;
        }

        .ancestor {
            margin-top: 1.25rem;
            width: 100%;
            height: 31rem;
            border: #000000 0.625rem;
            text-align: center;
            overflow: auto
        }

        .child {
            width: 21rem;
            height: 100%;
            background-color: white;
            display: inline-block;
            margin: 0 3.125rem 0 3.125rem;
            border: white 0.125rem;
        }

        .span-div {
            padding-left: 0.3125rem;
            text-align: left;
            width: 100%;
            height: 1.25rem;
            line-height: 2.5rem
        }

        .span-div .span-title {
            color: #F39C12;
            font-weight: bold;
        }

        .span-div .span-foot {
            color: #F39C12;
            float: right;
            padding-right: 1.25rem;
            font-weight: bold;
        }

        .span-div .span-body {
            padding-left: 1.25rem;
        }

        footer {
            background-color: darksalmon;
            width: 100%;
            height: 31.25rem;
        }

        .footer-one {
            width: 100%;
            height: 28rem;
            display: inline;
        }

        .footer-one .footer-one-left {
            width: 40%;
            height: 28rem;
            padding-left: 3.125rem;
            padding-top: 0.625rem;
            font-size: 2.25rem;
            font-weight: 800;
        }

        .footer-one-left input {
            width: 25rem;
            height: 3.125rem;
            margin-bottom: 0.625rem;
        }

        .footer-one-right input {
            text-align: center;
            width: 25rem;
            height: 3.125rem;
        }

        .footer-one .footer-one-right {
            float: right;
            width: 70%;
            height: 28rem;
            margin-top: -28.625rem;
            padding-left: 3.125rem;
            padding-top: 0.625rem;
            font-size: 2.25rem;
            font-weight: 800;
            text-align: center;
        }

        .footer-two {
            background-color: #D2691E;
            width: 100%;
            height: 3.25rem;
            text-align: center;
        }

        .footer-two .footer-two-span {
            color: white;
            font-weight: bold;
            line-height: 3.25rem;
        }
    </style>
</head>
<body>
<div data-th-include="febs/views/travel/header"></div>
<div id="content-area">
    <section>
        <div class="travel">
            <img th:src="@{images/travel.jpg}" style="width:100%;height: 100%"/>
        </div>
        <div style="position: fixed;color: black"></div>
        <div class="ancestor">
            <div class="child">
                <img th:src="@{images/greatwall.png}"
                     onclick=window.open("http://tour.quanjingke.com/xiangmu/CGA/333/pc.html")
                     style="width: 100%;height: 20rem"/>
                <div class="span-div">
                    <span class="span-title">Travel</span><br/>
                    <span class="span-body">Changes brought about by the epidemic to tourism:</span>
                    <span>VR technology</span><br/>
                    <span class="span-foot"><a href="travelTopic" style="text-decoration: none;color: #D2691E">Learn more</a></span><br/>
                </div>
            </div>
            <div class="child">
                <img th:src="@{images/potala.png}"
                     onclick=window.open("http://tour.quanjingke.com/xiangmu/CGA/494/pc.html")
                     style="width: 100%;height: 20rem"/>
                <div class="span-div">
                    <span class="span-title"><a th:href="suggestion" style="text-decoration: none;color: #D2691E">Commerce</a></span><br/>
                    <span class="span-body">To provide safer travel services:</span><br/>
                    <span>Contactless Payment (online banking)</span><br/>
                    <span class="span-foot"><a href="commerce"
                                               style="text-decoration: none;color: #D2691E">Learn more</a></span><br/>
                </div>
            </div>
            <div class="child">
                <img th:src="@{images/garden.jpg}"
                     onclick=window.open("http://tour.quanjingke.com/xiangmu/CGA/103/pc.html")
                     style="width: 100%;height: 20rem"/>
                <div class="span-div">
                    <span class="span-title"><a th:href="stat" style="text-decoration: none;color: #D2691E">Lesson from SARS</a></span><br/>
                    <span class="span-body">Relevant epidemic prevention tips:</span><br/>
                    <span>Real-time news</span><br/>
                    <span class="span-foot">Learn more</span><br/>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="footer-one">
            <div class="footer-one-left">
                <p><span>Contact Information</span></p>
                <div>
                    <img th:src="@{images/location.jpg}"
                         style="width: 2.6rem;height: 3.125rem;margin-bottom: -1.25rem;margin-right: -0.625rem"/>
                    <input type="text" placeholder="Lingang New City.Pudong New Area.Shanghai"/>
                </div>
                <div>
                    <img th:src="@{images/phone.jpg}"
                         style="width: 2.6rem;height: 3.125rem;margin-bottom: -1.25rem;margin-right: -0.625rem"/>
                    <input type="text" placeholder="support@shark.com"/>
                </div>
                <div>
                    <img th:src="@{images/email.jpg}"
                         style="width: 2.6rem;height: 3.125rem;margin-bottom: -1.25rem;margin-right: -0.625rem"/>
                    <input type="text" placeholder="China +86 2 33 44 55 66 US:+11 222 333 444"/>
                </div>
                <div style="width: 15rem;margin:0.625rem 0 0 15rem">
                    <a href="http://www.baidu.com" target="_blank"><img th:src="@{images/f.jpg}"
                                                                        style="width: 2.5rem;"/></a>
                    <a href="http://www.baidu.com" target="_blank"><img th:src="@{images/b.jpg}"
                                                                        style="width: 2.5rem;"/></a>
                    <a href="http://www.baidu.com" target="_blank"><img th:src="@{images/c.jpg}"
                                                                        style="width: 2.5rem;"/></a>
                </div>
            </div>
            <div class="footer-one-right">
                <p><span>Subscrible</span></p>
                <p><span style="font-size: 1.125rem;">By subscribing to our mailing list you will always get latest news form us</span>
                </p>
                <div>
                    <input type="text" placeholder="Your name" style="width: 12.5rem;margin-right: -1.25rem;"/>
                    <input type="text" placeholder="Enter your email address..."/>
                    <img th:src="@{images/email.jpg}"
                         style="width: 2.6rem;height: 3.4rem;margin-bottom: -1.4rem;margin-left: -0.9375rem;"/>
                </div>
            </div>
        </div>
        <div class="footer-two">
            <sapn class="footer-two-span">Copyright 2021. All rights reserved.</sapn>
        </div>
    </footer>
</div>
</body>
</html>
